<template>
	<view class="wanl-list">
		
		<!-- 导航条 -->
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar bg-bgcolor fixed" :style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px'}">
				<view class="action" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></text>
				</view>
				<view class="search-form round">
					<text class="wlIcon-sousuo1 text-bold"></text> 
					<input @confirm="confirm" :adjust-position="false" type="text" :placeholder="category" confirm-type="search"></input>
				</view>
				<view class="action" @tap="editListstyle()">
					<text class="wlIcon-listing-jf" v-if="liststyle == 'col-2-10'"></text>
					<text class="wlIcon-liebiao" v-else></text>
				</view>
			</view>
		</view>
		
		<view class="head" :class="{ headtop: scrollStype }">
			<view class="cue">
				<view class="bar">
					<view class="item" :class="{ current: filterIndex === 0 }" @tap="tabClick(0)">综合</view>
					<view class="item" :class="{ current: filterIndex === 1 }" @tap="tabClick(1)">销量</view>
					<view class="item" :class="{ current: filterIndex === 2 }" @tap="tabClick(2)">新上架</view>
					<view class="item" :class="{ current: filterIndex === 3 }" @tap="tabClick(3)">
						<text>价格</text>
						<view class="box">
							<text :class="{ active: priceOrder === 1 && filterIndex === 3 }" class="wlIcon-sheng"></text>
							<text :class="{ active: priceOrder === 2 && filterIndex === 3 }" class="wlIcon-jiang"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 主体 -->
		<wanl-empty v-if="goodsData.length === 0 && status !== 'loading'" :text="empty"/>
		<wanl-product v-if="goodsData.length > 0" :dataList="goodsData" :dataStyle="liststyle"/>
		<uni-load-more :status="status" :content-text="contentText" />
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shop_id: 0,
				empty: '',
				WanlScroll: 0, //记录页面滚动
				scrollStype: false, //滚动状态
				filterIndex: 0, //
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				liststyle: 'col-2-10', //列表样式
				goodsData: [], //商品列表数据
				category: '',
				params: {
					search: '',
					sort: 'weigh',
					order: 'asc',
					page: 1,
					filter: {},
					op: {}
				},
				reload: false, //判断是否上拉
				last_page: 0,
				status: 'loading',
				contentText: {
					contentdown: '',
					contentrefresh: '正在加载..',
					contentnomore: ''
				}
			};
		},
		onLoad(option) {
			this.shop_id = option.shop_id;
			if(option.category_id){
				this.params.filter.shop_category_id = option.category_id;
				this.params.op.shop_category_id = 'FIND_IN_SET'; //1.0.2升级
				if(option.category_name){
					this.category = '当前店铺类目:' + option.category_name;
				}else{
					this.category = '搜索店铺商品';
				}
				this.loadData();
				if (this.goodsData.length == 0) {
					this.empty = '没有查询到“'+this.category+'”的相关宝贝，以下为您推荐猜你喜欢的商品~';
				}
			}else{
				this.params.filter.shop_id = option.shop_id;
				this.params.op.shop_id = 'in';
				this.category = '搜索店铺商品';
				this.status = 'more';
				this.loadData();
				if (this.goodsData.length == 0) {
					this.empty = '暂时没有在店铺内找到任何产品，请搜索查询~';
				}
			}
		},
		// 监听上拉
		onPullDownRefresh() {
			this.params.page  = 1;
			this.reload = true;
			this.loadData();
		},
		// 下拉刷新
		onReachBottom() {
			if (this.params.page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.contentText.contentdown = '上拉显示更多';
				this.params.page = this.params.page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		// 监听滚动
		onPageScroll(object) {
			if (object.scrollTop > this.WanlScroll) {
				this.scrollStype = false;
			} else {
				this.scrollStype = true;
			}
			if (object.scrollTop < 0) {
				this.scrollStype = false;
			}
			this.WanlScroll = object.scrollTop;
		},
		methods: {
			//异步加载商品列表
			async loadData() {
				await uni.request({
					url: '/wanlshop/product/lists',
					data: this.params,
					success: res => {
						uni.stopPullDownRefresh(); // 后来统一补充，尚不知道是否有效在此处
						this.status = res.data.total == 0 ? 'noMore':'more';
						this.goodsData = this.reload ? res.data.data : this.goodsData.concat(res.data.data); //数据 追加
						this.params.page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
					}
				});
			},
			//筛选点击
			tabClick(index) {
				if (this.filterIndex === index && index !== 3) {
					return;
				}
				this.filterIndex = index;
				if (index === 3) {
					this.priceOrder = this.priceOrder === 1 ? 2 : 1;
				} else {
					this.priceOrder = 0;
				}
	
				// 排序方式
				if (index === 0) {
					this.params.sort = 'weigh';
					this.params.order = 'asc';
				}
				if (index === 1) {
					this.params.sort = 'sales';
					this.params.order = 'asc';
				}
				if (index === 2) {
					this.params.sort = 'createtime';
					this.params.order = 'asc';
				}
				if (index === 3 && this.priceOrder === 1) {
					this.params.sort = 'price';
					this.params.order = 'asc';
				}
				if (index === 3 && this.priceOrder === 2) {
					this.params.sort = 'price';
					this.params.order = 'desc';
				}
				this.status = 'loading';
				this.params.page = 1;
				this.reload = true;
				this.loadData();
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				});
			},
			editListstyle() {
				if (this.liststyle == 'col-1-10') {
					this.liststyle = 'col-2-10';
				} else {
					this.liststyle = 'col-1-10';
				}
			},
			confirm(event){
				this.category = event.detail.value;
				this.params.search = event.detail.value;
				this.params.filter = { shop_id: this.shop_id };
				this.params.op = { shop_id: '='};
				this.reload = true;
				this.loadData();
				
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				});
			}
		}
	};
</script>

<style>
	.cu-bar .search-form{
		background-color: #ebebeb;
	}
</style>
